<html>

<head>

<title>js—DOM 专项练习</title>
<meta charset="utf-8">
<style>
.practice-content {
    position: relative;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
	height:100%;
    overflow-x: hidden;
}

.practice-title{
	text-align:center;
	background: #FFECF5;
	box-shadow: #FFF7FB;
 
	font-size: 20px;
	font-weight:bold;
	padding-top:10px;
}

.practice-information {
	margin-top:20px;
	text-align:center;
	background: #FFECF5;
	box-shadow: #FFF7FB;
 
	font-size: 20px;
	font-weight:bold;
	padding-top:10px;
}

.information {
	margin-top:20px;
	text-align:center;
	background: #FFECF5;
 
	font-size: 20px;
	font-weight:bold;
	padding-top:10px;
}

.operate {
	margin-top:20px;
	text-align:center;
	background: #00FFFF;
 
	font-size: 20px;
	font-weight:bold;
	padding-top:10px;
}

.operate .selectContent {
 
	height:20px;
}

.operate .model {
	margin: 5px 0px;
}
.btn{
	margin-bottom: 20px;
}
.btn span{
	display:inline-block;
	background: red;
	color: #fff;
	padding: 10px 20px;
	border-radius: 20px;
	cursor: pointer;
}
</style>

</head>

 <body>

<div class="practice-content">
	<div class="practice-title">
		js—DOM 专项练习
	</div>
	
	<div class="practice-information">
		相关参考资料
	</div>
	
	<div class="information">
		<p>
			<a target="_blank" href='https://www.toutiao.com/a6393832513039778049/'>https://www.toutiao.com/a6393832513039778049/</a>
		</p>
		<p>
			<a target="_blank" href='https://www.toutiao.com/a6743782380575654408/'>https://www.toutiao.com/a6743782380575654408/</a>
		</p>
		<p>
			<a target="_blank" href='https://www.toutiao.com/a6388758061897302273/'>https://www.toutiao.com/a6388758061897302273/</a>
		</p>
		<p>
			<a target="_blank" href='https://www.cnblogs.com/saysmy/p/5594879.html'>https://www.cnblogs.com/saysmy/p/5594879.html</a>
		</p>
		<p>
			<a target="_blank" href='https://www.cnblogs.com/lzijian/p/6322868.html'>https://www.cnblogs.com/lzijian/p/6322868.html</a>
		</p>
	</div>
	
	<div class="operate">
		<ul id='u_list' class='model' onclick=createDom()>
			<li>点击新增11</li>
			<li>点击新增1122</li>
			<li>点击新增1133</li>
		</ul>
		<form id='content' style='display:block;background:#FAEBD7;' class='model'>
			<input  type='text'  name='input' value='123' id='input-text'>
			<input  type='radio' name='radio' value='1'>1
			<input  type='radio' name='radio' value='2'>2
			<input  type='checkbox' name='checkBox' value='3'>3
			<input  type='checkbox' name='checkBox' value='4'>4
			<input  type='checkbox' name='checkBox' value='5'>5
			<select class='selectContent formItem' name='select' id='select'>
				<option value='1'>1</option>
				<option value='2'>2</option>
				<option value='3'>3</option>
			</select>
			<textarea name='textArea' rows="2" cols="10"> 123 </textarea>
			<div name='div'>div<div>
			<input  type='checkbox' name='checkBox2' value='a'>a
			<input  type='checkbox' name='checkBox2' value='b'>b
			<input  type='checkbox' name='checkBox2' value='c'>c
		</form>
	</div>
 
	<p  class='btn' onclick=createEle()><span>点击创建一个dom</span></p>
	<p id='newDom'></p>
	
	<div class='btn'>
		<span onclick=setText()>给input赋值</span>
		<span onclick=getText()>获取input值</span>
		<span onclick=setRadio()>给radio赋选中值</span>
		<span onclick=getRadio()>获取radio选中值</span>
		<span onclick=setCheckBox()>给checkbox赋选中值</span>
		<span onclick=getCheckBox()>获取checkbox选中值</span>
		<span onclick=setSelect()>给select赋选中值</span>
		<span onclick=getSelect()>获取select选中值</span>
		
	</div>
	
	<p  class='btn'><span onclick=formData()>点击获取form数据</span></p>
</div>

<script>

/**
* 1、获取dom元素的方式
* 2、利用原生JS创建一个dom
* 3、利用原生JS创建一个dom，并插入到document里面的指定位置
* 4、利用原生JS创建一个dom，设置样式
* 5、常见表单元素，比如input、radio、checkbox、select等等，赋值、取值方法
*/

	var JS = {
		SetRadioValue:function(radioName,chosedValue){
			var radios = document.getElementsByName(radioName);
			for (var i =0;i<radios.length;i++) {
				if (radios[i].value === chosedValue) {
					radios[i].checked = true;
				}
			}
		},
		GetRadioValue:function(radioName){
			var radios = document.getElementsByName(radioName);
			for(var i = 0 ; i< radios.length; i++){
				var radio = radios.item(i);
				if(radio.checked){
					if(!radio.value) return '';
					return radio.value;
				}
			}
			return '';
		},
		SetCheckBoxValue:function(CheckBoxName,chosedValue){
			var CheckBoxs = document.getElementsByName(CheckBoxName);
			var arr = chosedValue? chosedValue.split(','):[];
			for (var i =0;i<CheckBoxs.length;i++) {
				for (var n =0;n<arr.length;n++) {
					if (CheckBoxs[i].value === arr[n]) {
						CheckBoxs[i].checked = true;
					}
				}
			}
		  
		},
		GetCheckBoxValue:function(CheckBoxName){
		    var str = [];
			var CheckBoxs = document.getElementsByName(CheckBoxName);
			for(var i = 0 ; i< CheckBoxs.length; i++){
				var CheckBox = CheckBoxs.item(i);
				if(CheckBox.checked){
					if(!CheckBox.value) return '';
					str.push(CheckBox.value);
				}
				
			}
			return str.toString();
		},
		SetSelectValue:function(SelectName,chosedValue){
			var Selects = document.getElementsByName(SelectName);
			Selects[0].value = chosedValue;
			 
		},
		GetSelectValue:function(SelectName){
			var Selects = document.getElementsByName(SelectName);
			return Selects[0].value;
			 
		},
		GetFormData:function(formId){
			var from = document.getElementById(formId);
			var json = {};
		    for (var i = 0; i < from.length; i++){
				var item = from.elements[i];
				var type = item.type;
				var name = item.name;
				var value = item.value;
				<!-- if(type == "text" || type == "password" || type == "select-one" || type == "tel" ||  -->
				 <!-- type == "search" || type == "range" || type == "number" || type == "month" ||  -->
				 <!-- type == "email" || type == "datetime-local" || type == "datetime" || type == "date" ||  -->
				 <!-- type == "color"){ -->
				 <!-- //获取到name的值,name的值就是向后台传递的数据 -->
		<!--   		 	json[name] = value; -->
				<!-- } -->
				<!-- else  -->
				if(type == "checkbox"){
					json[name] = this.GetCheckBoxValue(name);
				}
				else if(type == "radio"){
					json[name] = this.GetRadioValue(name);
				}else{
				    json[name] = value.trim();
				}
				
		    }  
			return json;
		}
 
	};
	

	function createEle() {
		var oContent = document.getElementById("newDom");
		var newNode = document.createElement("p");
		newNode.innerHTML = "This is a test";
		newNode.style.background = 'yellow';
	 
		//测试从这里开始
		//appendChild方法：
		oContent.appendChild(newNode);
		//insertBefore方法：
		oContent.insertBefore(newNode,null);
	
	}
 
	
	//冒泡函数
	var i = 0;
	function createDom (){
		var ulId = document.getElementById('u_list');
		var newLi = document.createElement('li');
		newLi.innerHTML = 'new-li'+i;
		newLi.style.color = 'red';
		ulId.appendChild(newLi);
			i++;
	}
	
	function setText() {
	    document.getElementById('input-text').value = '赋值内容'+i; 
		i++;
	}
	function getText() {
		var text = document.getElementById('input-text').valuec;
		alert(text,'===获取input值==')
	}
	
	function setRadio() {
		 JS.SetRadioValue('radio','2');
	}
	function getRadio() {
		var value = JS.GetRadioValue('radio');
		alert(value,'===获取radio选中值==')
	}
	
	function setCheckBox() {
		 JS.SetCheckBoxValue('checkBox','3,4')
	}
	function getCheckBox() {
		var value = JS.GetCheckBoxValue('checkBox');
		alert(value,'===获取CheckBox选中值==')
	}
	
	function setSelect() {
		 JS.SetSelectValue('select','3')
	}
	function getSelect() {
		var value = JS.GetSelectValue('select');
		alert(value,'===获取select选中值==')
	}
	
	function formData(){
		var data = JS.GetFormData('content');
		alert( JSON.stringify(data),'===form数据==')
	}
	

</script>

  </body>

</html>